<template>
  <div>
      <!-- 准备容器 -->
    <div ref="chart" style="width:100%;height:300px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core' //引入echarts5
import 'echarts/theme/macarons'  //图表主题

export default {
  data(){
    return {

    }
  },
  props:{ //父子传参
    title:{  //标题
        type:String,
        default:'图表的标题'
    },
    type:{   //图表类型
        type:String,
        default:'bar'
    },
    color:{ //图表颜色
        type:String,
        default:'#749f83'
    },
    chartData:{  //图表数据
        type:Array,
        default(){
            return [100,200,300,400,500,600,700]
        }
    },
    xAxisData:{  //x轴数据
        type:Array,
        default(){
            return ['一月','一月','一月','一月','一月','一月','一月']
        }
    }
  },
  //监听国际化变化，重新初始化
  watch:{
      '$i18n.locale'(curV,oldV){
          this.init();
      }
  },
  mounted(){
      this.init();
  },
  methods:{
      init(){
          //初始化
          let myChart = echarts.init(this.$refs.chart);
          let option = {
                color:this.color,
                title:{
                    text:this.title,  //标题
                    left:'center',  //居中
                    top:'3%'   //上间距
                },
                xAxis: { //x轴
                    type: 'category',
                    data: this.xAxisData,
                    axisLine:{
                        lineStyle:{
                            color:'#333'
                        }
                    }
                },
                yAxis: {  //y轴
                    type: 'value',
                    axisLine:{
                        lineStyle:{
                            color:'#333'
                        }
                    }
                },
                grid:{  //位置
                    left:'2%',
                    right:'2%',
                    bottom:'5%',
                    containLabel:true
                },
                series: [
                    {
                        data: this.chartData,
                        type: this.type,
                        smooth: true
                    }
                ]
            };
          //设置渲染
          myChart.setOption(option);
      }
  }
}
</script>


